<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染指令v-for</title>
</head>
<body>

<div id="app">
    <ul>
        <li v-for="book in books">{{ book.name }}</li>
    </ul>
</div>

<p>v-for的表达式支持一个可选参数作为当前项的索引</p>

<div id="app1">
    <ul>
        <li v-for="(book,index) in books">{{ index }} - {{ book.name }}</li>
    </ul>
</div>

<p>v-for也可以用在内置标签template上，将多个元素进行渲染</p>

<div id="app2">
    <ul>
        <template v-for="book in books">
            <li>书名：{{ book.name }}</li>
            <li>作者名： {{ book.author }}</li>
            <br/>
        </template>
    </ul>
</div>

<p>除了数组，对象的属性也是可以遍历的</p>
<div id="app3">
    <ul>
        <li v-for="value in users">
            {{ value }}
        </li>
    </ul>
</div>

<p>遍历对象属性时，有两个可选参数，分别是键名和索引</p>
<div id="app4">
    <ul>
        <li v-for="(value,key,index) in users">
            {{ index }} - {{ key }}: {{ value }}
        </li>
    </ul>
</div>

<p>v-for还可以迭代整数</p>

<div id="app5">
    <span v-for="n in 10">{{ n }}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * 当需要将一个数组遍历或者枚举一个对象循环显示时，就会使用到列表渲染指令v-for.
     * v-for指令需要结合in来使用，类似于item in items的形式。（in可以使用of进行代替）
     * **/

    var app = new Vue({
        el: "#app",
        data: {
            books: [
                {name: "Java"},
                {name: "JavaScript"},
                {name: "Python"},
                {name: "Kotlin"},
                {name: "Go"},
                {name: "Vue.js"},
            ]
        }
    });


    /**
     * v-for的表达式支持一个可选参数作为当前项的索引
     * **/

    var app1 = new Vue({
        el: "#app1",
        data: {
            books: [
                {name: "Java"},
                {name: "JavaScript"},
                {name: "Python"},
                {name: "Kotlin"},
                {name: "Go"},
                {name: "Vue.js"},
            ]
        }
    });

    /**
     * 与v-if一样，v-for也可以用在内置标签<template>上，将多个元素进行渲染
     * **/

    var app2 = new Vue({
        el: "#app2",
        data: {
            books: [
                {
                    name: "Java",
                    author: "test"
                },
                {
                    name: "JavaScript",
                    author: "hello",
                },
                {
                    name: "Python",
                    author: "envy",
                },
            ]
        }
    });

    /**
     * 除了数组，对象的属性也是可以遍历的
     * */
    var app3 = new Vue({
        el: "#app3",
        data: {
            users: {
                name: 'Envy',
                sex: "male",
                age: 24
            }
        }
    });

    /**
     * 遍历对象属性时，有两个可选参数，分别是键名和索引
     * **/

    var app4 = new Vue({
        el: "#app4",
        data: {
            users: {
                name: 'Envy',
                sex: "male",
                age: 24
            }
        }
    });

    /**
     * v-for还可以迭代整数，注意索引号从1开始
     * **/
    var app5 = new Vue({
        el:"#app5",
    })


</script>
</body>
</html>
